<template>
	<div id='resultAnalyse' style='margin-bottom:88px'>
		<div class='Analyse'>
			<el-tabs v-model="activeName" >
        <el-tab-pane label="自定义页面分析" name="first">
          <!-- 版本号 -->
          <div class='version'>
            <div class="versionDetail">
              <div class='versionFlex'>
                <div class="versiontop-left">
                  <span>A:</span>
                  <span class='versionTitle'>版本号</span>
                  <input type="text">
                </div>
                <div class="versiontop-left" >
                  <span class='versionTitle'>页面名称</span>
                  <input type="text">
                </div>
                <div class="versiontop-left">
                  <span>B:</span>
                  <span class='versionTitle'>版本号</span>
                  <input type="text">
                </div>
                <div class="versiontop-left" >
                  <span class='versionTitle'>页面名称</span>
                  <input type="text">
                </div>
              </div>
              <div class='look-no'>
                <span class='look'>查看</span>
                <span class='quxiao'>重置</span>
              </div>
            </div>
          </div>
          <div class="fenxi-resulte">
            <!-- 时间选择 -->
            <div class="resiltTite">
              <v-date-picker></v-date-picker>
              <div class='timeType'>
                <span :class='[Dayhour=="day" ? "TimeActive" : "" ]' @click='TimeType("day")'>按天</span>
                <span :class='[Dayhour=="hour" ? "TimeActive" : "" ]'  style='border-left:1px solid #D8DCE5' @click='TimeType("hour")'>按小时</span>
              </div>
            </div>
            <!-- 原始页面 -->
            <div class="pageContrastList" v-for='item in 1' :key="item.id">
              <div class='pageContrast'>
                <div class="pageContrast-Title">A:原始页面</div>
                <div class='Contrast-result'>
                  <div class="Contrast-result-left">
                    <img src="../../../../images/img1.png" height="100%" width="100%" alt="">
                  </div>
                  <div class="Contrast-result-right">
                    <chart :options="option"></chart>
                  </div>
                </div>
              </div>
            </div>
            <!-- 原始页面 -->
            <div class="pageContrastList" v-for='item in 1' :key="item.id">
              <div class='pageContrast'>
                <div class="pageContrast-Title">B:实验页面</div>
                <div class='Contrast-result'>
                  <div class="Contrast-result-left">
                    <img src="../../../../images/img2.png" height="100%" width="100%" alt="">
                  </div>
                  <div class="Contrast-result-right">
                    <chart :options="option1"></chart>
                  </div>
                </div>
              </div>
            </div>
            <!-- 综合对比 -->
            <div class="synthesize">
              <div class="synthesizeDetail">
                <p class="synthesizeTitle">综合对比</p>
                <div class='synthesize-eachart'>
                  <chart :options="option2"></chart>
                </div>
                <el-table
                  :data="tableData"
                  border
                  style="width: 100%;margin-top:35px">
                  <el-table-column
                    prop="date"
                    label="日期"
                    min-width="199"
                    align="center">
                  </el-table-column>
                  <el-table-column
                    prop="name"
                    label="A"
                    min-width="390"
                    align="center">
                  </el-table-column>
                  <el-table-column
                    prop="address"
                    label="B"
                    min-width="390"
                    align="center">
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="实验页面分析" name="second">
         <tab-first :is="currentView" keep-alive></tab-first>
        </el-tab-pane>
      </el-tabs>
		</div>
	</div>
</template>

<script type="text/ecmascript-6">
  import { VDatePicker } from '../../../../components'
  import ExperimentPage from './ExperimentPage'

  export default {
    components: {
       VDatePicker,
       ExperimentPage
      },
    data () {
      return {
       contrast: false,
       activeName: 'first',
       currentView: 'ExperimentPage',
       Dayhour: 'day', // 按天按时flag
       tableData: [
         {
           date: '2016-05-02',
           name: '王小虎',
           address: '上海市普陀区金沙江路 1518 弄'
         }, {
           date: '2016-05-04',
           name: '王小虎',
           address: '上海市普陀区金沙江路 1517 弄'
         }, {
           date: '2016-05-01',
           name: '王小虎',
           address: '上海市普陀区金沙江路 1519 弄'
         }, {
           date: '2016-05-03',
           name: '王小虎',
           address: '上海市普陀区金沙江路 1516 弄'
         }
       ], // table数据
        option: {
          color: ['#3398DB'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '直接访问',
              type: 'bar',
              barWidth: '60%',
              data: [10, 52, 200, 334, 390, 330, 220]
            }
          ]
        },
        option1: {
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true
          }]
        },
        option2: {
          title: {
            text: '折线图堆叠'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '邮件营销',
              type: 'line',
              stack: '总量',
              data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
              name: '联盟广告',
              type: 'line',
              stack: '总量',
              data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
              name: '视频广告',
              type: 'line',
              stack: '总量',
              data: [150, 232, 201, 154, 190, 330, 410]
            },
            {
              name: '直接访问',
              type: 'line',
              stack: '总量',
              data: [320, 332, 301, 334, 390, 330, 320]
            },
            {
              name: '搜索引擎',
              type: 'line',
              stack: '总量',
              data: [820, 932, 901, 934, 1290, 1330, 1320]
            }
          ]
        }
      }
    },
    methods: {
      TimeType (type) {
        this.Dayhour = type
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
#resultAnalyse
  .Analyse
    margin-top 40px
    .versionDetail
      border-bottom 1px solid #D8DCE5
      padding 20px
      .versionFlex
        display flex
        flex-wrap wrap
        width 755px
        align-items  center
        .versiontop-left
          display flex
          align-items center
          margin-bottom 10px
          span
            font-size 12px
            color #5A5E66
          .versionTitle
            margin 0 15px 0 30px
          input
            width 160px
            height 30px
            border 1px solid #D8DCE5
            border-radius 4px
            padding-left 10px
      .look-no
        display flex
        justify-content flex-end
        align-items flex-end
        margin-top 10px
        span
          font-size 12px
          width 65px
          height 30px
          border-radius 4px
          display flex
          justify-content center
          align-items center
          cursor pointer
        .look
          color #fff
          background #016DFB
        .quxiao
          border 1px solid #D8DCE5
          color #5A5E66
          margin-left 10px
    // 时间选择
    .fenxi-resulte
      margin-top 20px
      .resiltTite
        display flex
        align-items center
        margin-left 28px
        .timeType
          background #fff
          width 108px
          height 30px
          display flex
          align-items center
          border 1px solid #D8DCE5
          border-radius 4px
          margin-left 10px
          span
            width 50%
            height 100%
            display flex
            justify-content center
            align-items center
            cursor pointer
          .TimeActive
            background #EDF2FC
    // 原始页面
    .pageContrastList
      .pageContrast
        margin-top 20px
        background #F5F7FA
        padding 20px
        .Contrast-result
          display flex
          align-items center
          margin-top 29px
          .Contrast-result-left
            margin-right 23px
            width 50%
            height 323px
            background #fff
          .Contrast-result-right
            width 50%
            height 323px
            background #fff
            .echarts
              width 100%!important
              height 100%!important
              .echarts > div
                width 100%!important
                height 100%!important
                .echarts > div > canvas
                  width 100%!important
                  height 100%!important
    // 综合对比
    .synthesize
      padding 0 20px
      margin-top 30px
      .synthesizeDetail
        padding 20px 20px 40px 20px
        background #F5F7FA
        .synthesizeTitle
          font-size 16px
          color #6C7079
        .synthesize-eachart
            width 100%
            height 380px
            margin 30px auto 0 auto
            background #fff
          .echarts
            width 100%!important
            height 100%!important
            .echarts > div
              width 100%!important
              height 100%!important
              .echarts > div > canvas
                width 100%!important
                height 100%!important
</style>
